<{include file="public/header.html"}> 
        <link rel="stylesheet" type="text/css" href="<{$style_dir}>/css/photoswipe.css">
        <script type="text/javascript">is_load_face=true,share_type="article";</script>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
	<!--文章详情 首页-->
	<header class="title-fixed w100">
		<div class="title title-border-sm bj-white">
                    <a href="/" class="title-left col-red title-text">首页</a>
                    <a href="javascript:;" class="collection <{if $item['is_favorite']}>col-red<{/if}> fct_favorite fr" data-val="<{$item['is_favorite']}>">
                        <font class="iconfont" style="vertical-align: -6px;">&#xe6f8;</font>
                    </a>
                    <!--<a href="<{$item['space_url']}>"><h1 class="text-center disnone name"><{$item['nickname']}><img src="<{$style_dir}>/img/vip/vip1.png"/></h1></a>-->
                        <a href="javascript:;"><h1 class="text-center name" onclick="window.location.reload()">溜溜大院</h1></a>
                        <input type="hidden" id="art-info" data-aid="<{$item['article_id']}>" data-uid="<{$item['author_id']}>" data-title="<{$item['title']}>" data-desc="<{$item['summary']}>" data-link="<{$item['detail_url']}>" data-thumb="<{$item['thumb']}>"/>
		</div>
	</header>
	<!--文章详情 内容-->
	<div class="article-container mt50 mb60">
		<div class="article-head border plr15 ptb10 f-cb">
                    <a href="<{$item['space_url']}>" class="fl head-img mr5"><img src="<{$item['head_img']}>"/></a>
            <button class="follow fr <{if $item['is_fan']}>follow2<{/if}> fct_follow" data-val="<{$item['is_fan']}>">
            	<font class="iconfont col-white icon-follow">&#xe640;</font>
            	<i><{if $item['is_fan']}>已关注<{else}>未关注<{/if}></i>
			</button>
			<div class="pt5">
				<a href="<{$item['space_url']}>" class="name"><{$item['nickname']}><img src="<{$style_dir}>/img/vip/vip1.png"/></a>
				<p class="time"><{$item['create_time']}></p>
			</div>
		</div>
		<p class="article-title plr15 ptb10 font-bold">
			<{$item['title']}>
			<b></b>
		</p>
		<div class="text gallery"><{$item['content']}></div>
		<!--<div class="tip mtb20">
			声明：观点仅代表作者本人,不代表本站立场。 未经作者许可，禁止转载。  如有侵权文章,请联系我们（微信号：tanliuliu2015   QQ：2145212703 ）
		</div>-->
		<div class="admire plr15 ptb5">
			<!--<p class="con-title mb5">贵宾席</p>-->
			<p class="text-center font12 col-grey999 pb5">已有<i class="col-red"><{$reward|count}> 人</i>打赏</p>
			<ul class="f-cb">
                                <{foreach from=$reward item=val key=key}>
                                <{if ($key + 1) <= 5}>
                                <li><a href="<{$val['space_url']}>"><img src="<{$val['head_img']}>"/></a></li>
                                <{/if}>
                                <{/foreach}>
                                <{if count($reward) > 5}>
				<div class="disnone">
                                    <{foreach from=$reward item=val key=key}>
                                    <{if ($key + 1) > 5}>
                                    <li><a href="<{$val['space_url']}>"><img src="<{$val['head_img']}>"/></a></li>
                                    <{/if}>
                                    <{/foreach}>
				</div>
				<li><a href="javascript:;"></a></li>
                                <{/if}>
			</ul>
		</div>
                <div class="detail-label plr15 ptb5">
			<p class="con-title-app mb5">相关标签</p>
			<p class="relative-label">
                            <{foreach from=$item['tags'] item=val}>
				<a href="javascript:;"><{$val['tname']}></a>
                            <{/foreach}>
			</p>
		</div>
                <!--你可能还喜欢-->
		<div class="may-love">
			<p> <font class="iconfont icon-maylove">&#xe827;</font>	你可能还喜欢</p>
			<section class="love-list">
				<{foreach from=$like_article item=val}>
				<section>
                        <a href="<{$val['detail_url']}>" class="article-box f-cb">
	                    <div class="pic fl">
	                        <img class="lazy" data-original="<{$val['thumb']}>" alt="<{$val['title']}>" src="<{$val['thumb']}>">
	                    </div>
	                    <div class="article-detail">
	                        <p class="title"><{$val['title']}></p>
	                        <p class="state f-cb">
	                            <font class="iconfont fl"></font><span class="fl mr8"><{$val['commentnum']}></span><font class="iconfont fl mr3"></font><span class="fl"><{$val['readnum']}></span>
	                            <i class="fr">
	                                <img src="<{$val['head_img']}>" class="mr3" alt="<{$val['nickname']}>">
	                                <span><{$val['nickname']}></span>
	                            </i>
	                        </p>
	                    </div>
	                </a>
	            </section>
				<{/foreach}>
			</section>
		</div>
		<div class="comments plr15 sliding-jq">
                    <p class="con-title mb5">大家说</p>
                        <ul class="article-head" id="comment-onload-box">
			</ul>
                        <div class="loading" id="noresults" style="display: none;">
                            <a href="javascript:;" class="load-success empty-load">
                                <img src="<{$style_dir}>/img/none/none2.jpg">
                            </a>
                        </div>
                        <div class="loading" id="loading">
                            <a class="/*pull-load*/ load-success" href="javascript:;">加载中...</a>
                        </div>
                        <div class="loading" id="nomoreresults" style="display: none;">
                            <a href="javascript:;" class="load-success nomore-load">已经到底啦~~~</a>
                        </div>
		</div>
	</div>
	<!--文章详情 底部悬浮-->
        <div class="bottom w100" id="bottom-content-box">
		<div class="bottom-article-details bj-white ">
			<a href="javascript:;" onclick="javascript:history.back(-1);" class="icon-return iconfont title-top title-left">&#xe604;</a>
			<a href="javascript:;" class="input-search fl publicText comment-content-a">做个有观点的人</a>
			<ul>
				<!--评论-->
				<li><a href="javascript:;" class="icon-comments icon-size26 iconfont">&#xe618;<b><{$item['commentnum']}></b></a></li>
				<!--点赞-->
        <li><a href="javascript:;" class="icon-praise icon-size26 iconfont relative <{if $item['is_like']}>icon-praise2<{/if}> fct_like" data-val="<{$item['is_like']}>">&#xe63b;</a></li>
				<!--分享-->
				<li><a href="javascript:;" class="publicShare icon-share icon-size26 iconfont _share">&#xe94c;</a></li>
			</ul>
		</div>
	</div>
	<!--输入框 弹窗-->
	<div class="public-field-bj publick-jq1 comment-content-box">
            <div class="public-field-text w100 bj-white conment-text-box">
                <div class="btn-list title plr10 ptb10 border f-cb">
                    <a href="javascript:;" class="title-top title-left iconfont col-red close-jq _cancel" onclick="">&#xe668;</a>
					<a href="javascript:;" class=" title-top title-right iconfont col-red comment-btn _send" data-comment-id="" data-comment-uuid="" data-disable-val="发送中" onclick="">&#xe66f;</a>
                </div>
                <div class="text-list plr10 ptb5 border">
                        <textarea id="comment-content" class="w100" ></textarea>
                </div>
            </div>
	</div>
        <!--分享 弹窗-->
	<div class="public-field-bj publick-jq2 share-art-box">
            <div class="public-field-share w100 bj-grey share-content-box">
                <div class="plr10 ptb30">
                    <ul class="f-cb" id="share-box">
                        <li data-type="sina"><a href="javascript:;" class="iconfont icon-weibo" >&#xe611;</a><p>微博</p></li>
                        <li data-type="qq-space"><a href="javascript:;" class="iconfont icon-space">&#xe7dc;</a><p>QQ空间</p></li>
                    </ul>
                </div>
                <a href="javascript:;" class="btn close-jq bj-white _close">取&nbsp;消</a>
            </div>
	</div>
        <!--分享提示弹窗-->
        <div class="public-field-bj publick-jq5" id="wx-share" style="display: none;">
                <img src="<{$style_dir}>/img/share.png">
        </div>
        <!-- 图片弹出模态框 -->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="pswp__bg"></div>
		<div class="pswp__scroll-wrap">
			<div class="pswp__container">
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
			</div>
			<div class="pswp__ui pswp__ui--hidden">
				<div class="pswp__top-bar" >
					<div class="pswp__counter"></div>
					<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
					<button class="pswp__button pswp__button--share" title="Share"></button>
					<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
					<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
					<div class="pswp__preloader">
						<div class="pswp__preloader__icn">
							<div class="pswp__preloader__cut">
								<div class="pswp__preloader__donut"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="pswp__loading-indicator">
					<div class="pswp__loading-indicator__line"></div>
				</div>
				<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
					<div class="pswp__share-tooltip">
						<a href="#" class="pswp__share--facebook"></a>
						<a href="#" class="pswp__share--twitter"></a>
						<a href="#" class="pswp__share--pinterest"></a>
						<a href="#" download class="pswp__share--download"></a>
					</div>
				</div>
				<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
				<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
				<div class="pswp__caption">
					<div class="pswp__caption__center"></div>
				</div>
			</div>
		</div>
	</div>
        
        <script type="text/javascript" src="/static/js/native-sha-1.0.js"></script>
        <script type="text/javascript" src="/static/js/emotions.js"></script>
        <script type="text/javascript" src="/static/js/scrollpagination.js"></script>
        <script type="text/javascript" src="/static/js/article-min-1.0.js"></script>
        <script type="text/javascript" src="/static/js/photoswipe.min+photoswipe-ui-default.min+jquery.trasit+jquery.hammer+hammer+initPhotoSwipeFromDOM.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".text img").gallery_img();//图片预览
                $('body').delegate('.article-container .comments .all','click',function(e){
                    if( $(this).hasClass('active') ){
                        $(this).removeClass('active');
                        $(this).text('展开↓');
                        act1 = $(this).parent().children('.text').animate({'max-height':'70px'},500);
                    }else{
                        $(this).addClass('active');
                        $(this).text('收起↑');
                        act2 = $(this).parent().children('.text').animate({'max-height':'100%'},500);
                    }
                    e.stopPropagation();
                });
            });
        </script>
        <script type="text/javascript">
	$(function(){
            var appid = "<{$wxjsapi_config['appid']}>";
            var timestamp = "<{$wxjsapi_config['timestamp']}>";
            var nonceStr = "<{$wxjsapi_config['nonceStr']}>";
            var signature = "<{$wxjsapi_config['signature']}>";
            wx.config({
                debug: false,appId: appid,timestamp: timestamp,nonceStr: nonceStr, signature: signature,
                jsApiList:['checkJsApi','onMenuShareTimeline','onMenuShareWeibo','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone' ] 
            });
            var _a = $("#art-info"),_t=_a.attr("data-title"),_d=_a.attr("data-desc"),_l=_a.attr("data-link"),_i=_a.attr("data-thumb");
            wx.ready(function(){
                wx.onMenuShareAppMessage({title:_t,desc:_d,link:_l,imgUrl:_i,type: '',dataUrl: '',success: function () {},cancel: function () {}});
                wx.onMenuShareTimeline({title:_t,desc:_d,link:_l,imgUrl:_i,success: function () {},cancel: function () {}});
                wx.onMenuShareQQ({title:_t,desc:_d,link:_l,imgUrl:_i,type: '',dataUrl: '',success: function () {},cancel: function () {}});
                wx.onMenuShareWeibo({title:_t,desc:_d,link:_l,imgUrl:_i,success: function () {},cancel: function () {}});
                wx.onMenuShareQZone({title:_t,desc:_d,link:_l, imgUrl:_i,success: function () {},cancel: function () {}});
            });
            
            var currentPage = 0;
            $('#comment-onload-box').scrollPagination({
                'contentPage': "/ajax/ajax_fetch_art_comment",
                'contentData': {
                    'article_id': $("#art-info").attr("data-aid"),
                    'currentPage': currentPage
                },
                'scrollTarget': $(window),
                'heightOffset': 0,
                'beforeLoad': function() { // before load function, you can display a preloader div
                    $('#loading').fadeIn('fast');
                    $('#loading').attr('scrollpagination','disabled');
                },
                'afterLoad': function(elementsLoaded) { // after loading content, you can use this function to animate your new elements
                    $('#loading').fadeOut('fast');
                    $('#loading').attr('scrollpagination','enabled');
                    if (elementsLoaded.length == 0) {
                        if(currentPage != 0){
                            $('#nomoreresults').fadeIn('slow');
                        }
                        $('#comment-onload-box').stopScrollPagination();
                    }else{
                        currentPage = currentPage + 1;
                    }
                    if(elementsLoaded.length == 0 && currentPage == 0){
                        $("#noresults").fadeIn('slow');
                    }else{
                        for(var i=0;i<elementsLoaded.length;i++){
                            var str = AnalyticEmotion(elementsLoaded[i].innerHTML);
                            elementsLoaded[i].innerHTML = str;
                        }
                        this.contentData.currentPage = currentPage;
                        $(elementsLoaded).fadeInWithDelay();
                    }
                    if ($('#comment-onload-box').children().length > 100) { // if more than 100 results already loaded, then stop pagination (only for testing)
                        $('#nomoreresults').fadeIn();
                        $('#comment-onload-box').stopScrollPagination();
                    };
                }
            });     
            $.fn.fadeInWithDelay = function() {
                var delay = 0;
                return this.each(function() {
                    $(this).delay(delay).animate({
                        opacity: 1
                    }, 200);
                    delay += 100;
                });
            };
	});
    </script>
<{include file="public/footer.html"}> 
